<template>
  <div class="page page__authorize">
    <div class="page__content">
      <div class="title">
        您的平台产品当前授权状态为：
        <span
          v-if="authorInfo && authorInfo.auth === '1'"
          class="code done"
        >已授权</span>
        <span
          v-else
          class="code dont"
        >未授权</span>
        <span
          v-if="authorInfo.verifyUniqueCode"
          style="margin-left: 10px"
        >({{ authorInfo.verifyUniqueCode }})</span>
      </div>
      <div
        v-if="authorInfo && authorInfo.auth === '1'"
        class="authorize_info"
      >
        <div class="clearBoth item">
          <p class="left">
            授权申请信息:
          </p>
          <div
            class="left clearBoth value"
            style="width: 90%;"
          >
            <p class="left">
              {{ authorInfo.applicant }} {{ returnName(authorInfo.creatTime) || '未知' }}
            </p>
            <p class="right">
              审核时间：{{ returnName(authorInfo.verifyTime) || '未知' }}
              可建表数：{{ returnName(authorInfo.tableNum) || '未知' }}
              可建功能数：{{ returnName(authorInfo.funNum) || '未知' }}
              可建流程数：{{ returnName(authorInfo.processNum) || '未知' }}
              使用人数：{{ returnName(authorInfo.userNum) || '未知' }}
            </p>
          </div>
        </div>
        <div class="clearBoth item">
          <p class="left">
            顶部显示字样:
          </p>
          <div class="left value">
            <p>{{ returnName(authorInfo.topInfo) || '未知' }}</p>
          </div>
        </div>
        <div class="clearBoth item">
          <p class="left">
            数据加载字样:
          </p>
          <div class="left value">
            <p>{{ returnName(authorInfo.loadInfo) || '未知' }}</p>
          </div>
        </div>
        <div class="clearBoth item">
          <p class="left">
            公司信息字样:
          </p>
          <div class="left value">
            <p>{{ returnName(authorInfo.companyInfo) || '未知' }}</p>
          </div>
        </div>
      </div>
      <div class="btn_group clearBoth">
        <div class="btn_wrp left">
          <img
            @click="handleBtn('在线授权')"
            src="./assets/img/online.png"
            class="btn_img"
          >
        </div>
        <div class="btn_wrp left">
          <img
            @click="handleBtn('离线授权')"
            src="./assets/img/offline.png"
            class="btn_img"
          >
        </div>
      </div>
    </div>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="authorizeDialog"
      :modal-append-to-body="false"
      :before-close="closeDialog"
      width="50%"
      class="authorize_dialog"
    >
      <div class="form">
        <div
          v-if="dialogTitle === '在线授权'"
          class="dialog_item"
        >
          <p>
            <span class="red">*</span>
            授权码
          </p>
          <!-- <div class="input_wrp">
            <input type="text" v-model="form.VERIFY_UNIQUECODE">
          </div> -->
          <el-input
            v-model="form.VERIFY_UNIQUECODE"
            placeholder="请输入内容"
          />
        </div>
        <div
          v-if="dialogTitle === '在线授权'"
          class="dialog_item"
        >
          <p><span class="red">*</span>密钥</p>
          <el-input
            v-model="form.VERIFY_PRIVATE_KEY"
            :maxlength="1000"
            type="textarea"
            class="miyao_message"
            resize="none"
            autosize
          />
          <!-- <div class="input_wrp">
            <input type="text" v-model="form.VERIFY_PRIVATE_KEY">
          </div> -->
        </div>
        <div
          v-if="dialogTitle === '离线授权'"
          class="dialog_item"
        >
          <p><span class="red">*</span>上传 license 文件</p>
          <div class="input_wrp">
            {{ address }}
            <div
              @click="upload()"
              class="upload"
            >
              {{ offlineform.name }}
            </div>
            <i class="fa fa-folder upload_icon" />
          </div>
        </div>
      </div>
      <div class="btn_group">
        <span
          v-if="dialogTitle === '在线授权'"
          @click="onlineSubmit"
          class="save"
        >保 存</span>
        <span
          v-else
          @click="offlineSubmit"
          class="save"
        >保 存</span>
        <span
          @click="closeDialog"
          class="close"
        >关 闭</span>
        <!-- <el-button
          size="small"
          type="primary"
          v-if="dialogTitle === '在线授权'"
          @click="onlineSubmit"
        >提 交</el-button>
        <el-button
          size="small"
          type="primary"
          v-else
          @click="offlineSubmit"
        >提 交</el-button>
        <el-button
          size="small"
          type="info"
          @click="closeDialog"
          plain>
        关 闭</el-button> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getLicense, onlineAuthorize, getAuthInfo, offLineAuthorize,
} from './actions/api.js';

export default {
  name: 'DevAuthorize',
  data() {
    return {
      visible: false,
      authorizeDialog: false,
      form: {
        VERIFY_UNIQUECODE: '',
        VERIFY_PRIVATE_KEY: '',
      },
      dialogTitle: '离线授权',
      authorInfo: {},
      offlineform: {
        name: '',
      },
    };
  },
  created() {
    getAuthInfo().then((data) => {
      this.authorInfo = data.obj;
    });
  },
  mounted() {},
  methods: {
    setVisible(visible) {
      this.visible = visible;
    },
    handleBtn(type) {
      this.dialogTitle = type;
      this.authorizeDialog = !this.authorizeDialog;
    },
    upload() {
      const that = this;
      JE.uploadFile({
        fileTypes: 'license',
        // params: {
        //   returnType: 'all',
        //   jeFileType: 'PLATFORM',
        // },
        uploadFileType: 'func',
        post_params: { uploadType: 'OTHER' },
        callback(file) {
          that.$nextTick(() => {
            if (file.name !== 'je.license') {
              return JE.msg('请上传je.license');
            }
            that.offlineform.name = file.name;
            that.offlineform.DOCUMENT_ADDRESS = file.url;
          });
        },
      });
    },
    closeDialog() {
      this.form = {};
      this.offlineform = {};
      this.authorizeDialog = false;
    },
    onlineSubmit() {
      if (this.dialogTitle === '在线授权' && !this.form.VERIFY_UNIQUECODE) {
        return JE.msg('授权码不能为空!');
      }
      if (this.dialogTitle === '在线授权' && !this.form.VERIFY_PRIVATE_KEY) {
        return JE.msg('密钥不能为空!');
      }
      // getLicense(this.form).then((data) => {
      // if (data.success && data.obj) {
      onlineAuthorize(this.form).then((res) => {
        JE.msg(res.obj);
        this.authorizeDialog = false;
        this.closeDialog();
      }).catch((error) => {
        JE.msg(error.message);
      });
      // }
      // }).catch((err) => {
      //   JE.msg(err.message);
      // })
    },
    offlineSubmit() {
      if (this.dialogTitle === '离线授权' && !this.offlineform.DOCUMENT_ADDRESS) {
        return JE.msg('请上传license文件!');
      }
      offLineAuthorize({ fileKey: this.offlineform.DOCUMENT_ADDRESS }).then((data) => {
        this.authorizeDialog = false;
        JE.msg('离线授权成功，重启服务器生效！');
      });
    },
    returnName(item) {
      if (item === '-1') {
        return '不限';
      }
      return item;
    },
  },
};
</script>

<style lang="scss" scoped>
  .page__authorize {
    background-color: #ffffff;
    padding: 20px 0;
    height: 100%;
    .page__content {
      width: 1200px;
      margin: 0 auto;
      background: #ffffff;
      margin-top: 20px;
      height: 100%;
      position: relative;
      .title {
        color: #333333;
        font-size: 18px;
        > .code {
          font-size: 24px;
          font-weight: bold;
        }
        .dont {
          color: rgb(193, 0, 3);
        }
        .done {
          color: rgb(4, 117, 3)
        }
      }
      .authorize_info {
        background: rgb(243, 246, 254);
        color: rgb(144, 144, 144);
        padding: 20px;
        margin-top: 20px;
        .item{
          &:first-child {
            color: rgb(45, 45, 45);
          }
          &:not(:first-child) {
            margin-top: 5px;
          }
          .value {
            margin-left: 10px;
          }
        }
      }
      .btn_group {
        // position: absolute;
        // top: 50%;
        // left: 50%;
        // transform: translate(-50%, -50%);
        margin-top: 5%;
        width: 100%;
        .btn_wrp {
          width: 50%;
          box-sizing: border-box;
          position: relative;
          height: 300px;
          .btn_img {
            width: 290px;
            height: 246px;
            border: 1px solid rgb(240, 240, 240);
            box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, .1);
            border-radius: 12px;
            position: absolute;
            padding: 40px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            cursor: pointer;
          }
        }
      }
    }
    .authorize_dialog {
      .form {
        .dialog_item {
          margin-top: 5px;
          .red{
            color: red;
            margin-right: 5px;
          }
          .input_wrp {
            width: 100%;
            border: 1px solid #f3f3f3;
            border-radius: 4px;
            height: 30px;
            padding: 0 10px;
            position: relative;
            margin-top: 5px;
            > input {
              border: 0;
              width: 100%;
              height: 100%;
            }
            .upload {
              line-height: 28px;
              width: 100%;
              height: 100%;
              cursor: pointer;
            }
            .upload_icon {
              position: absolute;
              top: 7px;
              right: 15px;
              font-size: 14px;
              cursor: pointer;
            }
          }
          &:not(:first-child) {
            margin-top: 15px;
          }
        }
      }
      .btn_group {
        width: 100%;
        margin-top: 30px;
        text-align: center;
        > span {
          padding: 6px 12px;
          border-radius: 4px;
          cursor: pointer;
          background: #f4f4f4;
          border: 1px solid #dddddd;
          color: #444444;
          font-size: 12px;
          &:hover {
            background-color: #e7e7e7;
            border-color: #adadad;
          }
        }
        .save {
          border: 1px solid #386bd0;
          color: #ffffff;
          background: #386bd0;
          &:hover {
            color: #ffffff;
            background-color: #1a4c9c;
            border-color: #1a4c9c;
          }
        }
        .close {
          margin-left: 20px;
        }
      }
    }
  }
</style>
<style lang="scss" scoped>
  .left {
    float: left;
  }
  .right {
    float: right;
  }
  .clearBoth {
    &:after {
      content: '';
      clear: both;
      display: table;
    }
  }
</style>

<style lang="scss">
  .authorize_dialog {
    .el-dialog {
      margin-top: 10% !important;
    }
    .el-dialog__body {
      padding-top: 0 !important;
      .el-textarea {
        margin-top: 10px;
        textarea {
          min-height: 200px !important;
        }
      }
      .el-input {
        .el-input__inner {
          height: 30px !important;
          line-height: 30px !important;
          margin-top: 10px !important;
        }
      }
    }
  }
</style>
